<template>
	<div>
		<!-- 面包屑导航区域 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>网站管理</el-breadcrumb-item>
			<el-breadcrumb-item>网站设置</el-breadcrumb-item>
		</el-breadcrumb>

		<!-- 卡片视图区域 -->
		<el-card>
			<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
				<el-tab-pane label="轮播图" name="first">
					 <el-carousel trigger="click" type="card" height="250px" style="background-color: #eee;padding-top: 30px;">
					  <el-carousel-item v-for="(item,index) in bannerList" :key="index">
					    <img :src=" api_url + item " width="100%" height="100%" />
						</el-carousel-item>
					</el-carousel>
					<el-row style="margin-top: 20px;">
						<el-col :span="24">
							<el-button  type="primary" :disabled="this.bannerList.length==0" @click="upload()">{{ uploadName }}</el-button>
						</el-col>
					</el-row>
				</el-tab-pane>
				<el-tab-pane label="首页导航" name="second">
					<home-navigation></home-navigation>
				</el-tab-pane>
			</el-tabs>
		</el-card>
		
		<!-- 添加图片的对话框 -->
		<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close="addDialogClose">
		  <!-- 内容主体区域 -->
		  <el-form :model="addForm" ref="addFormRef" label-width="80px">
		    <!-- 用户头像 -->
		    <el-form-item prop="banner_url">
					<el-upload
					  class="upload-demo"
					  :action="api_upload"
						:multiple="true"
					  :on-remove="handleRemove"
						:on-success="handleAvatarSuccess"
					  :file-list="fileList"
					  list-type="picture"> 
					  <el-button size="small" type="primary">点击上传</el-button>
					</el-upload>
		    </el-form-item>
		  </el-form>
		  <!-- 底部区域 -->
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="addDialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="addBanner">确 定</el-button>
		  </span>
		</el-dialog>

	</div>
</template>

<script>
	import HomeNavigation from './HomeNavigation.vue'
	export default {
		components: {
			HomeNavigation
		},
		data() {
			return {
				httpRequest: this.$httpRequest,
				api_url: this.$api_url,
				api_upload: this.$api_upload,
				activeName: 'first',
				fileList: [],
				bannerList: [],
				uploadName: '图片上传',
				// 控制添加图片对话框的显示和隐藏
				addDialogVisible: false,
				// 添加图片的表单数据
				addForm: {},
				banner_url: [],
				userinfo: {}
			}
		},
		created() {
			this.userinfo = JSON.parse(window.sessionStorage.getItem('userinfo'))
			if (this.userinfo.role == 'business') {
				return this.$router.push('/reports')
			}
			this.getBannerList();
		},
		methods: {
			async getBannerList() {
				const { data: res } = await this.$http.get('banners');
				console.log('轮播图',res)
				if (res.code !== 200) return this.$message.error(res.msg)
				this.$message.success(res.msg)
				this.bannerList = res.data.banner_url;
				if (res.data.banner_url.length > 0) {
					this.uploadName = '更新图片'
				}
				console.log(this.bannerList)
			},
			handleClick(tab) {
				console.log(tab);
			},
			// 监听修改图片对话框的关闭事件
			addDialogClose () {
			  this.$refs.addFormRef.resetFields();
				this.fileList = [];
			},
			// 删除图片
			handleRemove(file, fileList) {
				let filePath;
				if (file.response) {
					filePath = file.response[0].file;
				} else {
					filePath = file.url.split(this.api_url)[1];
				}
				const index = this.bannerList.findIndex(x => x === filePath);
				this.bannerList.splice(index, 1)
			},
			// 图片上传成功
			handleAvatarSuccess(res, file) {
				console.log('success', res, file);
				this.bannerList.push(file.response[0].file);
				console.log(this.bannerList);
			},
			 upload() {
				this.bannerList.forEach((item)=>{
					this.fileList.push({
						url: this.api_url + item
					})
				})
				this.addDialogVisible = true
			},
			async addBanner() {
				console.log(this.bannerList);
				const { data: res } = await this.$http.post('banners', {
					banner_url: this.bannerList
				});
				console.log('banner', res);
				if (res.code !== 200) return this.$message.error(res.msg)
				this.$message.success(res.msg)
				this.addDialogVisible = false;
				this.getBannerList();
			},
			operate(row) {
				console.log(row);
			}
			
		}
	}
</script>

<style lang="less" scoped>
	.avatar-uploader .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    // position: relative;
	    overflow: hidden;
	  }
		.avatar-uploader {
			width: 90px;
			// display: block;
		}
	  .avatar-uploader .el-upload:hover {
	    border-color: #409EFF;
	  }
	  .avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 178px;
	    height: 178px;
	    line-height: 178px;
	    text-align: center;
	  }
	   .avatar {
	    width: 80px;
	   	margin-right: 10px;
	   }
		/deep/ .el-form-item__content {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			box-sizing: border-box;
		}
		/deep/ .el-upload-list__item {
			width: 110px; 
			float: left;
			margin-right: 10px;
		}
</style>
